import React , { useEffect,useState} from 'react'
import {connect} from 'react-redux'
import { useNavigate } from 'react-router-dom';
import './head.css'
import { HomeOutlined , SearchOutlined } from '@ant-design/icons'
import { Input } from 'antd';

function Head(props) {
  const router = useNavigate()
  const [activeIndex,setActiveIndex] = useState(null)
  useEffect(() => {
  },[])
  
  const navTo = (item) => {
    setActiveIndex(item.id)
    router('class',{state:item})
  }
  return (
    <div className="flex j-center">
      <div className="container">
        <div className="top">
          <div className="top_label flex a-center j-between">
            <div className='flex a-center left'>
              <HomeOutlined style={{'color':'#4bb4da', 'fontSize':'16px','cursor':'pointer','marginRight':'5px'}}/> 首页 
            </div>
            <div className="right flex ">
              <div className="r-item">去登录</div>
            </div>
          </div>
        </div>
        <div className="search-container">
          <div className="search-content flex a-center j-between">
            <img src={props.company_logo} className='shop-logo' onClick={()=>router('/')}/>
            <div className="search-input-border flex a-center j-between">
              <SearchOutlined style={{'color':'#409efc','fontSize':'24px'}}/>
              <Input placeholder="Basic usage" variant='borderless'/>
              <div className="search-button">搜索</div>
            </div>
          </div>
        </div>
        <div className="nav mt-20 bb">
          <div className="nav-container flex a-center">
            <div className="nav-fix" onClick={()=>{
              setActiveIndex(null)
              router('class')}}>全部商品</div>
            {
              props.cate.map((item,index)=>{
                if(index < 6){
                  return <div className={activeIndex===item.id?'nav-item active':'nav-item'}  key={item.id} onClick={()=>navTo(item)}>
                    {item.cate_title}
                  </div>
                }else if(index===7){
                  return <div className={activeIndex===item.id?'nav-item active':'nav-item'} key={19991119} onClick={()=>navTo({...item,id:19991119})}>
                    关于我们
                  </div>
                }
              })
            }
          </div>
        </div>
      </div>
    </div>
  )
}

export default connect(
  state=>state.webInfo,
  {}
)(Head)